<template>
  <!--模态窗 多行-->
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeInDown"
    leave-active-class="animated fadeOutUp"
  >

    <div class="modal-ctrl-body" v-show="userDetailsModal.isShow">
      <div class="modal-ctrl-main even-row-ctrl"  v-if="userDetailsModal.obj">
        <div class="modal-title">
          <p>查询用户详情</p>
        </div>
        <div class="modal-ctrl-content">
          <div class="even-row">
            <!--通用 -->
            <div class="modal-row" >
              <div class="modal-form-key f-l">
                用户名：
              </div>
              <input type="text" :value="userDetailsModal.obj.username" class="modal-text f-l" readonly="readonly">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                密码：
              </div>
              <input type="password" :value="userDetailsModal.obj.pwd"  class="modal-text f-l" readonly="readonly">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                用户状态：
              </div>
              <input type="text" :value="userDetailsModal.obj.state| isDisable" class="modal-text f-l" readonly="readonly">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                排序：
              </div>
              <input type="text" maxlength="4" placeholder="最长4位字符" :value="userDetailsModal.obj.sort" class="modal-text f-l" readonly="readonly">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                警员姓名：
              </div>
              <input type="text" :value="userDetailsModal.obj.policeName" class="modal-text f-l" readonly="readonly">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                警员生日：
              </div>
              <input type="text" :value="birthday" class="modal-text f-l" readonly="readonly">
            </div>
            <!--{{userDetailsModal.obj}}-->
            <div class="modal-row" >
              <div class="modal-form-key f-l">
                警员性别：
              </div>
              <input type="text" :value="userDetailsModal.obj.gender" class="modal-text f-l" readonly="readonly">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                所属单位：
              </div>
              <input type="text" :value="userDetailsModal.obj.policeStationInfo.stationName" class="modal-text f-l" readonly="readonly">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                警员类型：
              </div>
              <input type="text" :value=" userDetailsModal.obj.policeType ? userDetailsModal.obj.policeType.type : '' " class="modal-text f-l" readonly="readonly">
            </div>
            <div class="modal-row" >
              <div class="modal-form-key f-l">
                警员职位：
              </div>
              <input type="text" :value=" userDetailsModal.obj.policePosition ? userDetailsModal.obj.policePosition.position : '' " class="modal-text f-l" readonly="readonly">
            </div>


          </div>

        </div>
        <div class="btns text-r">

          <button type="button" class="btn btn-info" @click="layoutFn('close')">确定</button>
        </div>
        <!--{{userDetailsModal.obj}}-->
      </div>
    </div>
  </transition>
</template>

<script>
    export default {
        props:["userDetailsModal"],
        name: "ModalDetails",
        data(){
          return{
            birthday:""
          }
        },
        methods:{
          layoutFn(btnFn){
            if( btnFn === "close" ){
              this.$emit("closeModalFn")
            }
          }
        },
        watch:{
          userDetailsModal:{
            handler(v1){
              if( v1.isShow ){
                //查询生日转译
                if(this.userDetailsModal.obj.birthday){
                  this.birthday = (this.userDetailsModal.obj.birthday.split("T"))[0];
                }
                ////console.log(v1.isShow);
              }
            },
            deep:true
          }
        }
    }
</script>

<style scoped>

</style>
